<template>
  <ul class="ul-prog">
    <template v-for="(item,index) in headerData">
      <li>
        <div>{{ item }}</div>
        <el-progress :percentage="percentages[index]" stroke-linecap="round" stroke-width="10">
          <template #default="scope">
           <span style="color:#409eff;"> {{ tableData[index] }}</span>家
          </template>
        </el-progress>
      </li>
    </template>
  </ul>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";

const props = defineProps(['tableData'])
const headerData = reactive(['汽车部件', '生命（医疗）健康', '关键基础件（气动）', '电子信息', '新材料', '新能源（节能环保）', '智能家电', '时尚服装'])
const percentages = ref([])

const formatData = () => {
  const max = Math.max(...props.tableData);
  percentages.value = props.tableData.map(value => ((value / max) * 100).toFixed(2));
}

onMounted(() => {
  formatData()
})

</script>

<style lang="scss" scoped>
.ul-prog {
  padding: 0 20px;
  font-size: 14px;
  height: calc(100% - 60px);
  overflow-y: auto;

  > li {
    height: 45px;
  }
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: #409eff;
}

</style>
